<!-- 生成海报 -->
<template>
	<view class="v-poster-page">
		<!-- 海报 -->
		<image :src="path" mode="widthFix" @click="handlePreviewImg([path], 0)" class="v-border"></image>
		<!-- basePainter 当path（海报路径为空）时进入失败返回绘制海报 -->
		<sunui-painter isRenderBlob custom-style="position: fixed; left: 200%;" :isRenderImage="true"
			:board="basePainter" @success="getSuccessInfo" @fail="getFailInfo"></sunui-painter>
		<view class="flex-column" v-if="path">
			<view class="btnCss2 flex" >长按图片进行保存</view>
			<view class="v-cancel" @click="cancel()">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basePainter: {},
				path: '',
				poster: '/static/notImg.png',
				qrcode: '',
				options: {},
				detailInfo: {},
				avatarUrl: '/static/avatar.png',
				imgList: ''
			};
		},
		onLoad(options) {
			
			var pages = getCurrentPages(); //当前页
			var beforePage = pages[pages.length - 2]; //上个页面
			this.detailInfo = beforePage.$vm.daziInfoObject;
			this.imgList = this.detailInfo.cover_img.split(",")[0]


			console.log(this.detailInfo)
			this.$nextTick(()=>{
				this.getPoster();
			})
			// this.type = options.type;
		},
		onShow() {
			// this.$nextTick(()=>{
			// 	this.getPoster();
			// })
		},
		computed: {

			// 订单状态 '1 待审核 2 上架中 3 下架 4 驳回',
			expireTimeFn: function() {
				return function(timestamp) {

					// 创建一个 Date 对象
					const date = new Date(timestamp * 1000); // 需要将秒转换为毫秒

					// 获取年、月、日、小时、分钟
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计算，需要+1，并且补零
					const day = String(date.getDate()).padStart(2, '0'); // 补零
					const hours = String(date.getHours()).padStart(2, '0'); // 补零
					const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零

					// 拼接成 "年月日 时分" 格式
					const formattedDate = `${year}年${month}月${day}日 ${hours}时${minutes}分`;

					return formattedDate
				};
			},
			deadlineRegistrationFn() {

				return function(time, status) {
					console.log(Math.floor(Date.now() / 1000), time, status)
					if (Math.floor(Date.now() / 1000) > time) {
						return false
					} else {
						return true
					}
				}

			},
		},
		methods: {
			// 保存图片
			save() {
				// console.log(this.path)
				this.downloadIamge(this.path, 'image.png')
				// uni.saveImageToPhotosAlbum({
				// 	filePath: this.path,
				// 	success: result => {
				// 		this.$sun.toast('保存成功，可以去分享啦~','none');
				// 	},
				// 	fail: err => {
				// 		this.$sun.toast('保存失败，稍后再试','none');
				// 	}
				// });
			},
			downloadIamge(base64Url) {
				let imgUrl = base64Url;
				if (window.navigator.msSaveOrOpenBlob) { //兼容IE浏览器的写法
					let imageStr = atob(imgUrl.split(",")[1]);
					let n = imageStr.length;
					let u8arr = new Uint8Array(n);
					while (n--) {
						u8arr[n] = imageStr.charCodeAt(n);
					}
					let blob = new Blob([u8arr]);
					window.navigator.msSaveOrOpenBlob(blob, "chart-download" + "." + "png");
				} else { //非IE浏览器
					let a = document.createElement("a");
					a.href = imgUrl;
					a.setAttribute("download", "chart-download");
				}
			},



			// 取消
			cancel() {
				this.$sun.navBack();
			},
			async getPoster() {
				const result = await this.$http.post({
					url: this.$api.share,
					data: {
						// 产品id
						invite: this.userInfo.invite_code,
						// 用户id
						shareType: 1,
						// 团购id
						id: this.detailInfo.id
					}
				});
				if (result.code == 0) {
					this.qrcode = result.data.QRcode;
					this.handleShare();
				} else {
					this.$sun.toast(result.message);
				}

			},

			// 海报生成以后的路径
			getSuccessInfo(e) {
				// 会生成一个blob地址， 然后image进行一个显示
				this.path = e;
				uni.hideLoading();
			},
			// 海报生成失败的路径
			getFailInfo(e) {
				uni.showModal({
					title: '提示',
					content: `${JSON.stringify(e)}`,
					showCancel: false
				});

				this.$sun.delay(2, () => {
					uni.hideLoading();
				});
			},
			handleShare() {
				let poster = this.imgList;
				// let qrcode = this.qrcode;


				uni.showLoading({
					title: '海报生成中...'
				});

				// if (obj.name.length > 34) {
				// 	obj.name = obj.name.substring(0, 32) + '...';
				// }
				// if (obj.subhead.length > 46) {
				// 	obj.subhead = obj.subhead.substring(0, 46) + '...';
				// }

				console.log(this.path)
				if (this.path) {
					this.getSuccessInfo(this.path);
				} else {
					this.basePainter = {
						width: '750rpx',
						height: '1184rpx',
						background: '#f7f7f7',
						views: [{
								type: 'view',
								css: {
									left: '20rpx',
									top: '24rpx',
									background: '#D2C9FF',
									radius: '10rpx',
									width: '710rpx',
									height: '1100rpx',

								}
							},
							{
								type: 'view',
								css: {

									left: '42rpx',
									top: '47rpx',
									background: '#fff',
									radius: '10rpx',
									width: '670rpx',
									height: '1054rpx'
								}
							},
							{
								type: 'image',
								url: `${this.detailInfo.avatar ? this.detailInfo.avatar : ''}`,
								mode: 'widthFix',
								css: {
									left: '52rpx',
									top: '750rpx',
									width: '54rpx',
									height: '54rpx',
									radius: '50%',
									color: '#999'
								}
							},
							{
								type: 'text',
								text: `${this.detailInfo.nickname ? this.detailInfo.nickname : ''}`,
								css: {
									color: '#333',
									left: '120rpx',
									top: '756rpx',
									fontSize: '32rpx',
									fontWeight: 'bold'
								}
							},
							// {
							// 	type: 'text',
							// 	text: `${"搭伴性别:"+((this.detailInfo.sex==1||this.detailInfo.sex==0)?'性别不限':this.detailInfo.sex==2?'性别比例':'')}`,
							// 	css: {
							// 		color: '#666666',
							// 		left: '52rpx',
							// 		top: '830rpx',
							// 		fontSize: '28rpx',

							// 	}
							// },
							// <image class="detailsGenderImg" :src="detailsUser" mode="widthFix"></image>
							// <view class="flex-start-center">
							// 	<view style="color: #666666;">参与人数 : </view>
							// 	<view class="flex-start-center" style="margin-left: 8rpx;">
							// 		<view class="flex">
							// 			<image class="sexIcon" :src="sexNv" mode=""></image>
							// 			<text style="margin-left: 8rpx;">{{daziInfoObject.woman_participants_number}}</text>
							// 		</view>
							// 		<view class="flex margin-left_16rpx">
							// 			<image class="sexIcon" :src="sexNan" mode=""></image>
							// 			<text style="margin-left: 8rpx;">{{daziInfoObject.man_participants_number}}</text>
							// 		</view>
							// 		<view class="margin-left_16rpx">
							// 			共计{{(daziInfoObject.woman_number)+(daziInfoObject.man_number)}}人
							// 		</view>
							// 	</view>
							// </view>
						
							{
								type: 'text',
								text: `${"参与人数:"+((this.detailInfo.sex==1||this.detailInfo.sex==0)?'已报名'+this.detailInfo.participants_number+'人，共计'+this.detailInfo.people_number+'人':this.detailInfo.sex==2?'女:'+this.detailInfo.woman_participants_number+' 男:'+this.detailInfo.man_participants_number+' 共计'+(Number(this.detailInfo.woman_number)+Number(this.detailInfo.man_number))+'人':'')}`,
								css: {
									color: '#666666',
									left: '52rpx',
									top: '830rpx',
									fontSize: '28rpx',

								}
							},
							{
								type: 'text',
								text: `${"活动时间:"+this.expireTimeFn(this.detailInfo.activity_time)}`,
								css: {
									color: '#666666',
									left: '52rpx',
									top: '900rpx',
									fontSize: '28rpx'

								}
							},
							{
								type: 'text',
								text: `${"活动地址:"+this.detailInfo.address}`,
								css: {
									color: '#666666',
									left: '52rpx',
									top: '970rpx',
									fontSize: '28rpx',
									width: '450rpx',

									// 		whiteSpace: 'nowrap',
									// 		overflow: 'hidden',
									// 		textOverflow: 'ellipsis'


								}
							},

							{
								type: 'image',
								url: `${poster}`,
								mode: 'widthFix',
								css: {
									left: '52rpx',
									top: '60rpx',
									width: '653rpx',
									height: '636rpx'
								}
							},


							{
								type: 'image',
								url: `${this.qrcode}`,
								mode: 'widthFix',
								css: {
									left: '520rpx',
									top: '830rpx',
									width: '180rpx',
									height: '180rpx'
								}
							}
						]
					};
				}
			}
		}
	};
</script>

<style lang="less">
	page {
		background-color: #f7f7f7;
	}

	.v-poster-page {
		.v-border {
			border-radius: 10rpx;
			width: 750rpx;
		}

		.v-poster-content {
			height: 1082rpx;
			background: #ffffff;
			border-radius: 10rpx;
			margin: 24rpx 20rpx 68rpx;
		}

		.v-cancel {
			padding: 36rpx;
			font-size: 36rpx;
			color: #8f8f8f;
		}
	}
</style>